<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>个人资料</title>
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha512-SfTiTlX6kk+qitfevl/7LibUOeJWlt9rbyDn92a1DqWOw9vWG2MFoays0sgObmWazO5BQPiFucnnEAjpAB+/Sw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
  <style>
    .profile-card {
      background: white;
      border-radius: 24px;
      padding: 24px;
      box-shadow: 0 4px 16px rgba(0,0,0,0.1);
      margin-bottom: 16px;
    }

    .tab-button {
      background: white;
      border: none;
      padding: 12px 24px;
      border-radius: 24px;
      font-weight: 500;
      cursor: pointer;
      transition: background 0.3s ease;
    }

    .tab-button.active {
      background: #FF6B6B;
      color: white;
    }

    .progress-circle {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      background: #EFEFEF;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 16px;
    }

    .progress-circle::after {
      content: "";
      position: absolute;
      width: 90px;
      height: 90px;
      border-radius: 50%;
      background: linear-gradient(135deg, #FF6B6B, #EF5777);
      clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }

    .progress-text {
      position: relative;
      font-size: 24px;
      font-weight: bold;
      color: white;
    }
  </style>
</head>
<body>
  <header class="bg-white p-4 shadow-md flex justify-between items-center">
    <div class="flex items-center space-x-4">
      <button onclick="javascript:changePage1(1)" class="p-2 rounded-full bg-gray-100 hover:bg-gray-200">
        <i class="fa fa-arrow-left"></i>
      </button>
      <h1 class="text-xl font-bold">个人资料</h1>
    </div>
    <button id="open-modal" class="p-2 rounded-full bg-gray-100 hover:bg-gray-200">
      <i class="fa fa-ellipsis-v"></i>
    </button>
  </header>

  <main id="app3" class="p-4 space-y-6">
    <div class="profile-card">
      <div class="flex items-center justify-between">
        <div class="flex items-center space-x-4">
          <!--
          <div class="progress-circle">
             <div class="progress-text text-blue-999">55%</div>   
          </div>
          -->
          <div>
            <h2 class="text-lg font-bold">你的等级</h2>
            <p class="text-sm text-gray-600">
              {{ dengJi }}
              <!-- · 
              累计播放123个视频 -->
            </p>
          </div>
        </div>
        <div class="flex items-center space-x-4">
          <div class="flex items-center space-x-2">
            <i class="fa fa-heart text-pink-500"></i>
            <span class="text-sm text-gray-600">收藏 {{ souc }}</span>
          </div>
          <div class="flex items-center space-x-2">
            <i class="fa fa-rss text-blue-500"></i>
            <span class="text-sm text-gray-600">订阅 {{ diny }}</span>
          </div>
        </div>
      </div> 
      <p class="text-center text-sm text-gray-600">
        累计播放 {{ bofangshu }} 次语音
      </p>
    </div>

    <div class="profile-card">
      <div class="flex justify-between items-center">
        <h2 class="text-lg font-bold">
          <!-- 最近播放 -->
          <span id="currentTitle1">最近播放</span>
        </h2>
        <div class="flex items-center space-x-4">
          <button class="tab-button active" onclick="showTab('recent')">全部</button>
          <button class="tab-button" onclick="showTab('favorite')">收藏</button>
        </div>
      </div>

      <div id="recent" class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4" style="display: block;">
        <div v-for="(item, index) in boFangList" :key="index" >
        <div class="podcast-card">
          <!-- https://images.unsplash.com/photo-1615373344784-321d890000b3 -->
          <!-- https://images.unsplash.com/photo-1740188742933-8d01f40926c4 -->
          <img :src="item.picData" alt="播客封面" class="w-full h-32 rounded-image">
          <div class="p-2">
            <h3 class="text-sm font-bold">
              <!-- 科技早知道1 -->
              {{ item.title }}
            </h3>
            <p class="text-xs text-gray-600">
              <!-- 2025-03-10 · 38分钟 -->
              {{ item.content }}
            </p>
          </div>
        </div>
        </div>
         <!--<div class="podcast-card">
          https://images.unsplash.com/photo-1607720442477-81a3304142c3
          <img src="https://images.unsplash.com/photo-1741017269648-44a2497aba20?q=80&w=1169&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="播客封面" class="w-full h-32 rounded-image">
          <div class="p-2">
            <h3 class="text-sm font-bold">商业洞察力1</h3>
            <p class="text-xs text-gray-600">2025-03-09 · 52分钟</p>
          </div>
        </div>-->
      </div>

      <div id="favorite" class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4" style="display: none;">
        
        <div v-for="(item1,index) in shouCangList" :key="index" class="podcast-card">
          <!-- https://images.unsplash.com/photo-1615373344784-321d890000b3 -->
          <!-- https://images.unsplash.com/photo-1741290723083-d4733db1e42f -->
          <img :src="item1.picData" alt="播客封面" class="w-full h-32 rounded-image">
          <div class="p-2">
            <h3 class="text-sm font-bold">
              <!-- 科技早知道2 -->
              {{ item1.title }}
            </h3>
            <p class="text-xs text-gray-600">
              <!-- 2025-03-08 · 45分钟 -->
              {{ item1.content }}
            </p>
          </div>
        </div>

        <!-- <div class="podcast-card">
          https://images.unsplash.com/photo-1607720442477-81a3304142c3 
          <img src="https://images.unsplash.com/photo-1741514229652-9baef370a916?w=600&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxmZWF0dXJlZC1waG90b3MtZmVlZHw1N3x8fGVufDB8fHx8fA%3D%3D" alt="播客封面" class="w-full h-32 rounded-image">
          <div class="p-2">
            <h3 class="text-sm font-bold">商业洞察力2</h3>
            <p class="text-xs text-gray-600">2025-03-07 · 58分钟</p>
          </div>
        </div> -->

      </div>
    </div>

    <div class="profile-card">
      <h2 class="text-lg font-bold">账户设置</h2>
      <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
        <div class="flex items-center space-x-4 hover:bg-gray-100 rounded-lg p-3">
          <i class="fa fa-user-circle text-2xl text-gray-500"></i>
          <div>
            <h3 class="text-sm font-bold">个人信息</h3>
            <p class="text-xs text-gray-600">修改头像、昵称、简介</p>
          </div>
        </div>

        <div class="flex items-center space-x-4 hover:bg-gray-100 rounded-lg p-3">
          <i class="fa fa-cog text-2xl text-gray-500"></i>
          <div>
            <h3 class="text-sm font-bold">通用设置</h3>
            <p class="text-xs text-gray-600">主题、通知、隐私</p>
          </div>
        </div>

        <div class="flex items-center space-x-4 hover:bg-gray-100 rounded-lg p-3">
          <i class="fa fa-shield text-2xl text-gray-500"></i>
          <div>
            <h3 class="text-sm font-bold">安全中心</h3>
            <p class="text-xs text-gray-600">修改密码、设备管理</p>
          </div>
        </div>

        <div class="flex items-center space-x-4 hover:bg-gray-100 rounded-lg p-3">
          <i class="fa fa-sign-out text-2xl text-red-500"></i>
          <div>
            <h3 class="text-sm font-bold text-red-500">退出登录</h3>
            <p class="text-xs text-gray-600">安全退出当前账户</p>
          </div>
        </div>
      </div>
      <br>
    </div>
    <br>
    <hr>
  </main>

<!-- 弹框 -->
<div id="modal" class="fixed inset-0 bg-gray-500 bg-opacity-75 hidden flex justify-center items-center">
  <div class="bg-white p-8 rounded shadow-lg">
    <h2 class="text-xl font-bold mb-4">
      <!-- 这是一个弹框 -->
      发布播客
    </h2>
    <p class="mb-4">
      <!-- 弹框里可以放置各种内容，比如表单、提示信息等。 -->
      是否要发布新的播客？
    </p>

    <button class="bg-red-500 text-white py-2 px-4 rounded">发布播客</button>

    <button id="close-modal" class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded">
        关闭弹框
    </button>
  </div>
</div>


  <!-- <script src="https://kit.fontawesome.com/your-fontawesome-kit.js" crossorigin="anonymous"></script> -->
</body>
<script src="https://unpkg.com/jquery@3.7.1/dist/jquery.js"></script>
<script src="https://unpkg.com/vue@2.7.16/dist/vue.min.js"></script>
<script>



  $(function(){

    const openModalButton = document.getElementById('open-modal');
    const closeModalButton = document.getElementById('close-modal');
    const modal = document.getElementById('modal');   
    // 打开弹框
    openModalButton.addEventListener('click', () => {
        modal.classList.remove('hidden');
    });

    // 关闭弹框
    closeModalButton.addEventListener('click', () => {
        modal.classList.add('hidden');
    });
  })

  function changePage1(e){
      window.parent.postMessage('Hello from iframe','http://localhost:88/');
      window.parent.changePage(1)
  }

  function showTab(tabName) {
    const tabs = ['recent', 'favorite'];
    tabs.forEach(tab => {
      document.getElementById(tab).style.display = 'none';
    });
    document.getElementById(tabName).style.display = 'grid';

    // console.log("tabName-=>",tabName)
    if(tabName == 'recent'){
      $("#currentTitle1").text("最近播放")
    }else{
      $("#currentTitle1").text("最近收藏")
    }

    // 更新按钮状态
    const buttons = document.getElementsByClassName('tab-button');
    Array.from(buttons).forEach(button => {
      button.classList.remove('active');
    });
    document.querySelector(`[onclick="showTab('${tabName}')"]`).classList.add('active');
  }

  new Vue({
    el:'#app3',
    data(){
      return{
        msg:'abc',
        id: 0,
        uId: '',
        souc: "0",
        diny: "0",
        boFangList:[],
        shouCangList:[],
        level: 0,
        dengJi: '青铜',
        bofangshu: 0
      }
    },
    created(){
      this.initialData();
      this.initialCurrentList();
    },
    mounted(){

    },
    methods:{
      one(){
        console.log("one()")
      },
      initialData(){
        console.log("initialData()")
        let _that = this;

        this.souc = sessionStorage.getItem("souc");
        this.dingy = sessionStorage.getItem("dingy");
        this.level = sessionStorage.getItem("level");
        this.id = sessionStorage.getItem("user_id");
        this.uId = sessionStorage.getItem("user_uId");

        $.ajax({
          type:'GET',
          url:'./profile1.php',
          data:{"userInfo":this.uId},
          success:function(res){
            console.log(res);
            let arr1 = JSON.parse(res);
            let souc1  =arr1[0];
            let diny1  =arr1[1];
            console.log("souc1-=>",souc1.souc);
            console.log("diny1-=>",diny1.diny);
            let souc2 = souc1.souc;
            let diny2 = diny1.diny;
            _that.souc = souc2;
            _that.diny = diny2;
          },
          timeout:2000,
          error:function(e){
            console.log(e);
          }
        })


      },
      initialCurrentList(){
        console.log("initialCurrentList()")

        let _that = this


        $.ajax({
            type:'GET',
            url:'./profile1.php',
            data:{"user_uId":this.uId,"id":this.id,"boFangList2":"1"},
            success:function(res){
              // console.log(res);
              let arr1 = JSON.parse(res);
              // console.log("1 arr1-=>",arr1)
              // console.log("1.5 arr1-=>",arr1[0])
              if(arr1.length == 1){
                // let arr2 = [...arr1];
                let arr2 = JSON.parse(JSON.stringify(arr1));
                //let arr2 = Array.from(arr1[0]);
                let arr2a = arr1[0];
                arr1.push(arr2a);
              }
              _that.boFangList = arr1;   
              // console.log("2 arr1-=>",arr1)
              // console.log("3 arr1-=>",JSON.stringify(arr1))
            },
            timeout:2000,
            error:function(e){
              console.log(e);
            }
        })  

        $.ajax({
            type:'GET',
            url:'./profile1.php',
            data:{"user_uId":this.uId,"id":this.id,"shouCangList2":"1"},
            success:function(res){
              // console.log(res);
              let arr1 = JSON.parse(res);

               _that.shouCangList = arr1;  
            },
            timeout:2000,
            error:function(e){
              console.log(e);
            }
        })

      }
    }
  })

</script>
</html>